import { defineComponent, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import {
  EditOutlined,
} from "@ant-design/icons-vue";
import accountRecoedService from "@/modules/channelManagement/accountRecord.service";
export default defineComponent({
  name: 'accountRecordPage',
  setup() {
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter",],
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "50px",
        },
        {
          title: "账号",
          dataIndex: "username",
          align: "center",
          width: "200px",
        },
        {
          title: "金额",
          dataIndex: "money",
          align: "center",
          width: "120px",
        },
        {
          title: "类型",
          dataIndex: "type",
          align: "center",
          width: "120px",
        },
        // {
        //   fixed: "right",
        //   title: "操作",
        //   dataIndex: "operation",
        //   align: "center",
        //   width: "100px",
        // },
      ],
      loading: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    })
    const LTableRef = ref(null as any);
    const $service = new accountRecoedService();
    return () => (
      <Page>
        <CardWithTitle title="消费记录">
          <LTable
            ref={LTableRef}
            toolbar={state.toolbar}
            service={$service}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              loading={state.loading}
              v-slots={{
                bodyCell: ({ column, record }: any) => {
                  //操作
                  if (column.dataIndex === "operation") {
                    return (
                      <a-button
                        type="primary"
                        size="small"
                        v-slots={{
                          icon: () => <EditOutlined />,
                        }}
                        onClick={() => {
                          
                        }}
                      >
                        查看
                      </a-button>
                    )
                  }
                  //类型
                  if (column.dataIndex === "type") {
                    return record.type === 1 ? (
                      <div>充值</div>
                    ) : (
                      <div>消费</div>
                    );
                  }
                },
              }}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    )
  }
})